import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { modifyUser } from "./../../store/action"
// homeView写法不同，不是一个纯Ui组件：
const HomeView = () => {
  const userInfo = useSelector(state => state.userInfo)
  const dispatch = useDispatch()

  const modifyUserHandler = () => {
    dispatch(modifyUser({ ...userInfo, uname: '小蚊子' }))
  }
  return (
    <div>
      <h1>HomeView</h1>
      <ul>
        <li>username: {userInfo.uname}</li>
        <li>sex: {userInfo.usex}</li>
        <li>sid: {userInfo.usid}</li>
        <li>tel: {userInfo.utel}</li>

      </ul>
      <div>
        <button type='button' onClick={modifyUserHandler}>修改用户信息</button>
      </div>
    </div>
  );
}

export default HomeView;
